<template>
  <div class="begin">
    <div class="right">
      <div class="rightBegin">
        <div class="beginText">
          <img src="../../assets/BeginTxt.png" alt="">
        </div>
        <div class="beginBtn" @click="toIndex">
          <img src="../../assets/btn.png" alt="">
        </div>
      </div>
      <div class="rightText1">
        我是 "先锋小科"，可以回答与疫情相关的各种问题
      </div>
      <div class="rightText2">
        为您提供实用的建议和帮助
      </div>
      <div class="rightText3">
        现在让我们开始交流吧！
      </div>
    </div>
    <div class="beginCard1">
      <div class="cardText1">
        Intelligent
      </div>
      <div class="cardText2">
        Consultation
      </div>
      <div class="cardText3">
        智能咨询
      </div>
      <div class="cardText4">
        即时响应
      </div>
      <div class="cardText5">
        精准解答传染病问题
      </div>
      <div class="cardText6">
        专业知识触手可及
      </div>
    </div>
    <div class="beginCard2">
      <div class="cardText1">
        Report
      </div>
      <div class="cardText2">
        Generation
      </div>
      <div class="cardText3">
        报告生成
      </div>
      <div class="cardText4">
        智能定制
      </div>
      <div class="cardText5">
        自动化生成专业报告
      </div>
      <div class="cardText6">
        提高汇报工作效率
      </div>
    </div>
    <div class="beginCard3">
      <div class="cardText1">
        Document
      </div>
      <div class="cardText2">
        Question-Answering
      </div>
      <div class="cardText3">
        智能咨询
      </div>
      <div class="cardText4">
        深度解析
      </div>
      <div class="cardText5">
        构建个人文献知识库
      </div>
      <div class="cardText6">
        助力科研学习之旅
      </div>
    </div>
    <div class="beginCard4">
      <div class="cardText1">
        Data
      </div>
      <div class="cardText2">
        Analysis
      </div>
      <div class="cardText3">
        数据分析
      </div>
      <div class="cardText4">
        模拟预测
      </div>
      <div class="cardText5">
        深入分析传染病数据
      </div>
      <div class="cardText6">
        提供科学决策支持
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter()
const toIndex = () => {
  router.push({ path: '/index' })
}
</script>

<style lang="scss" scoped>
@use "sass:math";
.begin {
  width: 100%;
  min-height: 100vh;
  background: url('../../assets/beginImage.png') no-repeat center/cover;
  position: relative;
  overflow-x: hidden;

  .right {
    width: clamp(300px, 30vw, 440px);
    position: absolute;
    top: clamp(100px, 16vh, 200px);
    right: clamp(20px, 5vw, 80px);

    .rightBegin {
      display: flex;
      align-items: center;
      gap: clamp(10px, 1.5vw, 20px);

      .beginText {
        width: clamp(180px, 18vw, 240px);

        img {
          width: 100%;
          height: auto;
        }
      }

      .beginBtn {
        width: clamp(100px, 10vw, 138px);
        height: clamp(40px, 5vh, 47px);
        background-color: #00569D;
        border-radius: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        cursor: pointer;

        &:hover {
          filter: brightness(1.1);
          box-shadow: 0 4px 20px rgba(27, 122, 85, 0.3);
          transform: translateY(-2px);
        }

        &:active {
          transform: translateY(1px);
        }

        img {
          width: clamp(30px, 3vw, 39px);
          height: auto;
        }
      }
    }

    [class^="rightText"] {
      text-align: right;
      color:#00569D;
      margin: clamp(5px, 0.7vh, 10px) clamp(20px, 3vw, 40px) 0 0;
      font-size: clamp(14px, 1.1vw, 16px);
      line-height: 1.4;

      &.rightText3 {
        text-decoration: underline;
      }
    }
  }

  @mixin card-base($min-width, $max-width, $aspect-ratio) {
    $width: clamp(#{$min-width}, 22vw, #{$max-width});
    width: $width;
    aspect-ratio: #{$aspect-ratio};
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    bottom: clamp(20px, 4vh, 50px);
    padding: clamp(15px, 2vh, 30px) 0 0 clamp(20px, 3vw, 60px);

    [class^="cardText"] {
      line-height: 1.3;
      $base-size: calc(#{$width} * 0.06);

      &:nth-child(1),
      &:nth-child(2) {
        font-size: clamp(#{$base-size}, 1.8vw, calc(#{$base-size} * 1.5));
        line-height: 1.2;
      }

      &:nth-child(3) {
        font-size: clamp(calc(#{$base-size} * 0.8), 1.4vw, #{$base-size});
        margin: clamp(5px, 1vh, 15px) 0 clamp(15px, 1.5vh, 20px);
      }

      &:nth-child(n+4) {
        font-size: clamp(calc(#{$base-size} * 0.6), 1.1vw, calc(#{$base-size} * 0.8));
        margin-top: clamp(8px, 1.5vh, 15px);
        line-height: 1.25;
      }
    }
  }

  .beginCard1 {
    @include card-base(250px, 290px, math.div(290, 447));
    left: clamp(20px, 3vw, 50px);
    background-image: url('../../assets/begin1.png');
    padding-top: 13vh;
    padding-left: 2vw;
  }

  .beginCard2 {
    @include card-base(320px, 396px, math.div(396, 614));
    left: 24vw;
    background-image: url('../../assets/begin2.png');
    color: #fff;
    padding-top: 22vh;
  }

  .beginCard3 {
    @include card-base(280px, 322px, math.div(322, 475));
    left: 53vw;
    background-image: url('../../assets/begin3.png');
    padding-top: 13vh;
  }

  .beginCard4 {
    @include card-base(260px, 310px, math.div(310, 465));
    left: min(78vw, calc(100vw - 22vw));
    background-image: url('../../assets/begin4.png');
    padding-top: 13vh;
  }

  /* 响应式调整 */
  @media (max-width: 1440px) {
    .beginCard2 {
      left: 22vw;
    }

    .beginCard3 {
      left: 50vw;
    }

    .beginCard4 {
      left: 72vw;
    }
  }

  @media (max-width: 1024px) {
    .right {
      width: clamp(280px, 40vw, 400px);
      top: 10vh;
    }

    [class^="beginCard"] {
      transform: scale(0.9);
      transform-origin: center bottom;
    }
  }

  @media (max-width: 768px) {
    background-position: 60% center;

    .right {
      position: relative;
      width: 90%;
      top: 5vh;
      margin: 0 auto 5vh;

      [class^="rightText"] {
        font-size: clamp(14px, 4vw, 16px);
        text-align: center;
        margin-right: 0;
      }
    }

    [class^="beginCard"] {
      position: relative;
      width: 85%;
      max-width: 400px;
      aspect-ratio: 0.7;
      margin: 20px auto;
      left: 0 !important;
      transform: none !important;
      padding: 15% 10% 0 12%;

      [class^="cardText"] {

        &:nth-child(1),
        &:nth-child(2) {
          font-size: min(5vw, 24px);
        }

        &:nth-child(3) {
          font-size: min(4vw, 20px);
        }

        &:nth-child(n+4) {
          font-size: min(3.5vw, 16px);
        }
      }
    }
  }

  @media (max-width: 480px) {
    .rightBegin {
      flex-direction: column;

      .beginText {
        width: 70%;
        margin-right: 0;
      }

      .beginBtn {
        width: 45%;
        margin-top: 15px;
      }
    }

    [class^="beginCard"] {
      [class^="cardText"] {

        &:nth-child(1),
        &:nth-child(2) {
          font-size: 6.5vw;
        }

        &:nth-child(3) {
          font-size: 5vw;
        }

        &:nth-child(n+4) {
          font-size: 4vw;
        }
      }
    }
  }
}
</style>
